<template>
  <svg t="1745995186667" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1528" data-spm-anchor-id="a313x.search_index.0.i2.274e3a81XdmTZZ" :width="`${state.option.width}`" :height="`${state.option.height}`">
    <path d="M512 12.047059a439.717647 439.717647 0 0 0-439.717647 439.717647V783.058824a48.188235 48.188235 0 0 0 48.188235 48.188235h783.058824a48.188235 48.188235 0 0 0 48.188235-48.188235V451.764706A439.717647 439.717647 0 0 0 512 12.047059z m13.191529 96.617412A343.341176 343.341176 0 0 1 855.341176 451.764706v283.105882H168.658824V451.764706a343.341176 343.341176 0 0 1 343.341176-343.341177l13.191529 0.240942zM963.764706 885.458824a48.188235 48.188235 0 0 1 6.023529 96.015058l-6.023529 0.361412H60.235294a48.188235 48.188235 0 0 1-6.023529-96.015059L60.235294 885.458824h903.529412z" :fill="`${cmap.iconColor[0]}`" p-id="1529" data-spm-anchor-id="a313x.search_index.0.i1.274e3a81XdmTZZ" class="selected"></path>
    <path d="M508.385882 207.450353A48.188235 48.188235 0 0 1 581.029647 270.456471l-4.698353 5.421176L478.147765 373.458824H662.588235a48.188235 48.188235 0 0 1 38.369883 77.402352l-4.156236 4.698353-180.103529 181.850353a48.188235 48.188235 0 0 1-73.065412-62.403764l4.638118-5.421177L546.936471 469.835294H361.411765c-40.839529 0-62.283294-46.983529-38.189177-77.703529l4.216471-4.638118L508.385882 207.450353z" :fill="`${cmap.iconColor[1]}`" p-id="1530" data-spm-anchor-id="a313x.search_index.0.i0.274e3a81XdmTZZ" class=""></path>
  </svg>
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, watch} from "vue";
import {copyDefinedProperties} from "../../../utils/copy.ts";
import {getColorFromLocal} from "../../../package/style/css.ts";
let cmap=getColorFromLocal()
const props = defineProps(['option']);
const state=reactive({
  option:{
    height:10,
    width:20,
    left:10,
    top:10,
  },
  window:{
    height:1700,
    width:800,
  },
})
onMounted(()=>{
  setting()
})
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
  }
  getWH()
}
watch(()=>props.option,(newValue,oldValue)=>{
  setting()
},{immediate:true,deep:true})
window.addEventListener('resize',()=>{
  getWH()
})
function getWH(){
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  state.option.height=(props.option.height/100)*state.window.height
  state.option.width=(props.option.width/100)*state.window.width
}

const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
</script>

<style scoped>
.icon{
  position: absolute;
  left: v-bind(left);
  top:v-bind(top);
}
</style>
